<!-- <template>
  <div class="page-container">
    <div ref="echartsMap1" class="echarts-container"></div>
  </div>
</template>
<script setup lang="ts">
import { ref, reactive, onMounted, getCurrentInstance, watch, Ref } from "vue";
import mapdata from "../../assets/json/mapdata.json";
const currentName = "china"; // 地图名称
const { proxy } = getCurrentInstance() as any;
const { $echarts, $axios } = proxy;
$echarts.registerMap(currentName, mapdata);
const echartsMap1 = ref(null); // 获取DOM节点
let myChart: any = null;
let allMap: Map<string | number, citymodel> = new Map();
// 第一份信息就是中国
onMounted(() => {
  myChart = $echarts.init(echartsMap1.value);
  allMap.set(100000, {
    name: "中国",
    adcode: 100000,
    url: "https://geo.datav.aliyun.com/areas_v3/bound/100000_full.json",
    childrenNum: 34,
    center: [0, 0],
    hasRegister: false, // 是否已经注册在echarts
  });
  myChart.setOption(option);
  console.log("allMap", allMap);
});

let option = {
  title: {
    text: `${currentName}地图`,
    left: "center",
    top: "2%",
    textStyle: {
      color: "#fff",
    },
  },
  backgroundColor: "#070d18",
  series: [
    {
      name: `${currentName}地图`,
      //使用上面注册的地图
      map: currentName,
      //初始化类型写地图
      type: "map",
      roam: true, //鼠标滚轮缩放
      selectedMode: false, // 点击选中区域
      // 区块文字样式
      label: {
        normal: {
          formatter: "{b}",
          show: true,
          textStyle: {
            color: "#fff",
          },
        },
        emphasis: {
          show: true,
          textStyle: {
            color: "#05C3F9",
          },
        },
      },
      // 区块样式
      itemStyle: {
        normal: {
          areaColor: "#0C356C",
          borderColor: "#3B5077",
          borderWidth: 1,
        },
        emphasis: {
          areaColor: "#0C356C",
          shadowColor: "#1773c3",
          shadowBlur: 20,
        },
      },
      select: {
        // 地图选中区域样式
      },
      data: [],
    },
  ],
};
</script>
<style lang="scss" scoped>
.page-container {
  width: 100%;
  height: 100%;
  // background: cyan;
  .echarts-container {
    width: 100%;
    height: 100%;
  }
}
</style> -->
<template>
  <div class="mapWrapper">
    <a-button type="primary" @click="goBack">返回上级</a-button>
    <div ref="mapChartRef" style="height: 100%; width: 100%"></div>
  </div>
</template>

<script setup>
import axios from "axios";
import { ref, onMounted } from "vue";
import * as echarts from "echarts";

const mapChartRef = ref();
const initChinaMap = ref();
const initAdCode = ref(100000); // 默认中国地图的编码
const currentMapName = ref("中国"); // 默认地图的名称
const mapList = ref([]); // 当前展示的省市区所有数据
const historyInfo = ref([]); // 记录历史点击的省市区，用于返回查询

// 获取地图数据
const getMapData = async (code) => {
  const data = await axios
    .get(`https://geo.datav.aliyun.com/areas_v3/bound/${code}_full.json`)
    .then((res) => {
      mapList.value = [];
      if (res.status === 200) {
        // 获取当前选中的省市区的所有名称和编码
        res.data.features.forEach((item) => {
          mapList.value.push(item.properties);
        });
        renderChart(currentMapName.value, res.data);
      }
    })
    .catch(() => {});
  return data;
};

// 渲染地图
const renderChart = (mapName, mapData) => {
  // 注册: registerMap('地图名称', 地图数据）, 地图名称须和option里面的map一致
  echarts.registerMap(mapName, mapData);

  // 地图配置项
  const option = {
    // 提示浮窗样式
    tooltip: {
      show: true,
      trigger: "item",
      alwaysShowContent: false,
      backgroundColor: "#0C121C",
      borderColor: "rgba(0, 0, 0, 0.16);",
      hideDelay: 100,
      triggerOn: "mousemove",
      enterable: true,
      textStyle: {
        color: "#DADADA",
      },
      showDelay: 100,
      formatter: (params) => {
        return params.name;
      },
    },
    series: [
      {
        type: "map",
        map: mapName, // 地图名称
        data: [],
        zoom: "1.1", // 当前视角的缩放比例
        label: {
          show: true, // 是否显示省份名字
        },
        roam: false, // 是否开启缩放和平移
        itemStyle: {
          borderColor: "#F59A23", // 边界线颜色
          borderType: "dashed", // 边界线类型
        },
        // 设置鼠标移上去高亮的样式
        emphasis: {
          itemStyle: {
            borderColor: "#34AEAE",
            areaColor: "#CCEBEB",
            borderType: "solid",
          },
        },
      },
    ],
  };

  // 渲染
  initChinaMap.value.setOption(option);

  // 防止多次触发click事件，重要！！！
  initChinaMap.value.off("click");

  // 下钻
  initChinaMap.value.on("click", (params) => {
    const activeItem = mapList.value.find((item) => item.name == params.name);
    // 判断有子级的时候才可以下钻
    if (activeItem && activeItem.adcode && activeItem.childrenNum) {
      historyInfo.value.push(activeItem);
      currentMapName.value = params.name;
      getMapData(activeItem.adcode);
    }
  });
};

onMounted(() => {
  initChinaMap.value = echarts.init(mapChartRef.value);
  getMapData(initAdCode.value);
});

// 返回上一级
const goBack = () => {
  const lastItem = historyInfo.value.pop();
  if (lastItem && lastItem.parent && lastItem.parent.adcode) {
    getMapData(lastItem.parent.adcode);
  }
};
</script>

<style scoped lang="scss">
.mapWrapper {
  width: 100%;
  height: 100%;
  padding: 10px;
  border: 1px dashed orange;
  .mapChartRef {
    height: 100%;
    width: 100%;
  }
}
</style>
